import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Dropdown } from 'semantic-ui-react'
import { listTable as listTableDuck } from 'ducks'

const sortOptions = [
  {
    text: '按名称顺序',
    value: 'name-asc',
    column: 'name',
    method: 'asc',
  },
  {
    text: '按名称倒序',
    value: 'name-desc',
  },
  {
    text: '最早创建',
    value: 'create_at-asc',
  },
  {
    text: '最新创建',
    value: 'create_at-desc',
  },
]

const Sort = ({ sortInfo, actionSortMethod }) => (
  <Dropdown
    value={sortInfo}
    selection
    options={sortOptions}
    onChange={(e, { value }) => actionSortMethod(value)}
  />
)

const mapStateToProps = state => ({
  sortInfo: listTableDuck.selectors.sortInfo(state),
})

const mapDispatchToProps = {
  actionSortMethod: listTableDuck.creators.actionSortMethod,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Sort)
